<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mobile first web app theme | first</title>
  <meta name="description" content="mobile first, app, web app, responsive, admin dashboard, flat, flat ui">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <link rel="stylesheet" href="/static/css/bootstrap.css">
  <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  <link rel="stylesheet" href="/static/css/plugin.css">
  <link rel="stylesheet" href="/static/css/style.css">  
  <!--[if lt IE 9]>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/html5.js"></script>
  <![endif]-->
</head>
<body>

 {% include 'common/header.html' %}
 {% include 'common/nav.html' %}
  <section id="content">
    <section class="main padder">
      <div class="col-lg-12">
        <div class="row">
          <hr>
          <div class="row">
            {% include 'panelmeter/device/TaskCreate.html' %}
          </div>
        </div>
      </div>
    </section>
  </section>

  <script src="/static/js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="/static/js/bootstrap.js"></script>
  <!-- app -->
  <script src="/static/js/app.js"></script>
  <script src="/static/js/app.plugin.js"></script>
  <script src="/static/js/app.data.js"></script>
  <!-- fuelux -->
  <script src="/static/js/fuelux/fuelux.js"></script>
  <!-- datepicker -->
  <script src="/static/js/datepicker/bootstrap-datepicker.js"></script>
  <!-- slider -->
  <script src="/static/js/slider/bootstrap-slider.js"></script>
  <!-- file input -->  
  <script src="/static/js/file-input/bootstrap.file-input.js"></script>
  <!-- combodate -->
  <script src="/static/js/combodate/moment.min.js"></script>
  <script src="/static/js/combodate/combodate.js"></script>
  <!-- parsley -->
  <script src="/static/js/parsley/parsley.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {

      // checkbox
      var url = '/static/js/data/datagrid.json';
      var data = ''
      var checkbox = "<div class='checkbox'>\
                        <label class='checkbox-custom'>\
                          <input type='checkbox' name='{0}'>\
                            <i class='icon-unchecked checked'></i>\
                              {1}\
                        </label>\
                      </div>"

      setTimeout(function () {
        $.ajax(url, {
          dataType: 'json',
          async: false,
          type: 'GET'
        }).done(function (response) {
          data = response.deviceData;
          for (var i = 0; i < data.length; i++) {
            checkboxHTML = checkbox.format(data[i].device_id, data[i].device_name);
            $(".devicesCheckbox").append(checkboxHTML)
          }
          //使加入的Checkbox生效
          $('.checkbox-custom > input[type=checkbox]').each(function () {
            var $this = $(this);
            if ($this.data('checkbox')) return;
            $this.checkbox($this.data());
          });
        }).fail(function(e){

        });
      }, 1);
    })

    //var str = "js实现用{two}自符串替换占位符{two} {three}  {one} ".format({one: "I",two: "LOVE",three: "YOU"});  
    //var str2 = "js实现用{1}自符串替换占位符{1} {2}  {0} ".format("I","LOVE","YOU");  
    String.prototype.format = function() {  
     if(arguments.length == 0) return this;  
     var param = arguments[0];  
     var s = this;  
     if(typeof(param) == 'object') {  
      for(var key in param)  
       s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);  
      return s;  
     } else {  
      for(var i = 0; i < arguments.length; i++)  
       s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);  
      return s;  
     }  
    }
</script>
</body>
</html>